<template>
    <div class="class-mg">
        <!-- 创建班级头部 -->
        <div class="create-class">
            <n-input-group>
                <n-input @keydown.enter="onQuery()" v-model:value="query" style="width: 50%;margin-left: 10px;" placeholder="根据学生昵称查询"/>
                <n-button type="primary" @click="onQuery()" ghost>搜索</n-button>
            </n-input-group>
        </div>

        <!-- 班级信息表格 -->
        <div class="my-student">
            <span>学生管理</span>
            <el-table :data="studentData" style="width: 100%;border-radius: 10px;">
                <el-table-column prop="className" label="班级" width="120"></el-table-column>
                <el-table-column prop="nickName" label="学生昵称" width="180"></el-table-column>
                <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
                <el-table-column label="踢出班级" #default="data">
                    <!-- 确认删除 -->
                    <el-popconfirm title="确认删除?" @confirm="onDeleteClass(data.row.classId, data.row.studentId)">
                        <template #reference>
                            <img src="/src/assets/svg/delete1.svg" class="deleye-img">
                        </template>
                    </el-popconfirm>
                </el-table-column>
            </el-table>
        </div>
    </div>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import { StarFilled } from "@element-plus/icons-vue";
import { Star } from "@element-plus/icons-vue";
import teacherHttp from '@/api/teacherHttp';
import { openInfo } from '@/utils/openInfo';
import useUserStore from '@/stores/useUserStore';
const  userStore = useUserStore()
onMounted(()=>{
    // 初始化学生列表
    getStudentList()
})

//学生列表数据studentId  classId nickName email className
const studentData = ref([])

// 把这个学生踢出班级
function onDeleteClass(classId, studentId) {
    console.log(classId,studentId);
    
    teacherHttp.deleteStudent(classId, studentId).then((res)=>{
        openInfo(res.msg)
        //更新数据
        getStudentList()
    })
}
//查询输入框
const query = ref('')
//模糊查询列表
function onQuery(){
    if(query.value!=''){
        teacherHttp.queryStudent(userStore.userInfo.userId,query.value).then((res)=>{
            studentData.value= res.data
        })
    }else{
        getStudentList()
    }
}
//获取该老师的学生列表
function getStudentList(){
    teacherHttp.getStudentList(userStore.userInfo.userId).then((res)=>{
        studentData.value= res.data
        // console.log("获取学生列表",res.data);
    })
}

</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
    background-color: rgb(182, 174, 174, 0.1);
    display: flex;
    flex-direction: column;
    height: 900px;
    border-radius: 10px;
}

/* 创建班级和发送通知 */
.create-class {
    margin: 10px;
    height: 50px;
    background-color: rgb(182, 174, 174, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

/* 关闭弹窗键 */
.deleye-img {
    transition: transform 0.3s ease;
    cursor: pointer;
    margin-left: 10px;
}

.deleye-img:hover {
    transform: scale(1.2);
}

.Table_box {}

/* 我创建的班级 */
.my-student {
    border-radius: 10px;
    padding: 20px;

}
</style>